<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .all{
            width: 100%;
            height: 100%;
            background: url(login/img/yemian.png) no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            /*position: relative;*/
        }
        .page{
            width: 400px;
            height: 600px;
            border-radius: 20px;
            background: url(login/img/beijng.png) no-repeat;
            background-size: 100% 100%;
            /*background-position: -262px -117px;*/
            /*position: absolute;
            top: 200px;
            left: 1250px;*/
            float: right;
            margin-top: 100px;
            margin-right: 30px;
            margin-bottom: 200px;
        }
        .page>form>input:first-child{
            width: 220px;
            height: 40px;
            margin-top:345px;
            margin-left: 90px;
            text-indent: 20px;
            border-radius: 10px;
            border: none;
            color: gray;
        }
        .page>form>input:first-child+input{
            width: 220px;
            height: 40px;
            margin-top: 20px;
            margin-left: 90px;
            text-indent: 20px;
            border-radius: 10px;
            border: none;
            color: gray;
        }
        .page>div{
            overflow: hidden;
            width: 50%;
            height: 30px;
            /*border: 1px solid black;*/
            margin: 20px auto;
        }

        .page>div a:first-child{
            color: white;
            float: left;
            font-size: 12px;
        }
        .page>div a:first-child+a{
            color: white;
            float: right;
            font-size: 12px;
            /*margin-right: 40px;*/
        }
        .page>div a{
            text-decoration: none;
        }
        .page>div a:hover{
            color: gray;
        }
        .page>div a:first-child+a:hover{
            color: gray;
        }
        .page>button{
            width:220px;
            height: 30px;
            background-color: #87a4f6;
            text-align: center;
            line-height: 30px;
            border: none;
            margin: 0 0 0 90px;
            border-radius: 10px;
            color: white;
            font-size: 20px;
        }
        .page>button:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="page">
        <form>
            <input type="text" value="用户名："/>
            <input type="text" value="密码："/>
        </form>
        <div>
            <a href="##">忘记密码了吗</a>
            <a href="##">免费注册</a>
        </div>
        <button id="login">登陆</button>
    </div>
</div>
<script type="text/javascript">
    var url = "/index";
    document.getElementById("login").addEventListener("click",function () {
        window.location.href = url
    })
</script>
</body>
</html>
